<template>
  <MainLayout>
    <div class="tunnel-view">
      <div id="map-container"></div>
      <!-- 右侧信息面板 -->
      <div class="info-panel">
        <div class="panel-header">隧道概况</div>
        <div class="panel-content">
          <div class="chart-container" ref="chartRef"></div>
        </div>
      </div>
    </div>
  </MainLayout>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, provide, watch } from "vue";
import * as echarts from "@/plugins/echarts";
import AMapLoader from "@amap/amap-jsapi-loader";
import MainLayout from "../main/components/MainLayout.vue";
import { getTunnelList, getTunnelSummary } from "@/api"; // 导入API
// 导入图标资源
import tunnelGroupIcon from "@/assets/image/TunnelOverviewPanel/按钮样式07.png";
import singleTunnelIcon from "@/assets/image/TunnelOverviewPanel/按钮样式07 拷贝.png";
import { useRouter, useRoute } from 'vue-router'; // 导入路由

// 地图实例
let map = null;

// 声明路由
const router = useRouter();
const route = useRoute();

// 创建一个空的supermapRef，用于注入到MainLayout
const supermapRef = ref(null);
// 提供supermapRef给MainLayout组件
provide("supermapRef", supermapRef);

onMounted(() => {
  nextTick(() => {
    initChart();
    window.addEventListener("resize", handleResize);
  });
  // 将initMap方法暴露给window对象
  window.initMap = initMap;
  initMap();
  
  // 如果从其他页面返回隧道概况，确保三维隧道标记也正常显示
  loadSupermapTunnelMarkers();
});

// 加载三维地图上的隧道标记
function loadSupermapTunnelMarkers() {
  if (!supermapRef.value) {
    console.warn('supermapRef未初始化，无法加载三维隧道标记');
    return;
  }
  
  // 检测supermapRef是否准备好
  const checkAndLoadMarkers = () => {
    if (supermapRef.value && typeof supermapRef.value.loadTunnelMarkers === 'function') {
      // 调用三维地图的隧道标记加载方法
      console.log('加载三维地图隧道标记');
      supermapRef.value.loadTunnelMarkers()
        .then(result => {
          console.log('三维隧道标记加载结果:', result);
        })
        .catch(error => {
          console.error('加载三维隧道标记出错:', error);
        });
    } else {
      console.warn('supermapRef未完全初始化，无法加载三维隧道标记');
    }
  };
  
  // 延迟执行，确保supermapRef已完全初始化
  setTimeout(checkAndLoadMarkers, 1000);
}

// 观察路由变化，当进入隧道概况页面时触发三维隧道标记加载
watch(() => route.path, (newPath) => {
  if (newPath.includes('/tunnel')) {
    console.log('进入隧道概况页面，加载三维隧道标记');
    loadSupermapTunnelMarkers();
  }
}, { immediate: true });

// 初始化地图
function initMap() {
  console.log("开始初始化地图...");
  
  // 如果地图已经存在，先销毁它
  if (map) {
    map.destroy();
    map = null;
  }

  // 设置安全配置
  window._AMapSecurityConfig = {
    securityJsCode: "2b71b40da1bbd37b27d45a76cb574923",
  };

  // 检查地图容器是否存在
  const mapContainer = document.getElementById("map-container");
  if (!mapContainer) {
    console.error("地图容器不存在，DOM可能尚未渲染");
    setTimeout(initMap, 500); // 500ms后重试
    return;
  }
  console.log("地图容器已找到:", mapContainer);

  // 加载地图API
  AMapLoader.load({
    key: "dc4cd392c3fd43f5e675d2d51f4c612c", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale", "AMap.DistrictSearch", "AMap.DistrictLayer"], // 添加DistrictLayer插件用于区域渲染
  })
    .then((AMap) => {
      try {
        // 检查容器是否存在
        const container = document.getElementById("map-container");
        if (!container) {
          console.error("地图容器不存在");
          return;
        }

        // 创建地图实例
        map = new AMap.Map("map-container", {
          viewMode: "3D", // 是否为3D地图模式
          zoom: 8.0, // 调整初始缩放级别，更好地显示隧道标记
          center: [107.0, 29.8], // 调整中心点位置，确保覆盖API返回的隧道位置
          pitch: 0, // 俯仰角度
          showBuildingBlock: false, // 不显示3D建筑物
          showLabel: true, // 显示标签
          mapStyle: "amap://styles/9fbf781893474ba556820c4b787efcf1", // 使用用户提供的自定义地图样式ID
        });

        // 添加调试事件，输出地图相关信息
        map.on("complete", function () {
          // console.log('地图加载完成');
        });

        // 添加点击事件，用于调试坐标
        map.on("click", function (e) {
          console.log("点击位置坐标:", e.lnglat.getLng(), e.lnglat.getLat());
        });

        // 监听地图缩放事件，自适应调整标记大小
        map.on("zoomchange", function () {
          updateMarkersScale();
        });

        // 清空全局数组，用于存储所有标记，便于后续调整大小
        window.tunnelMarkers = [];
        window.tunnelTexts = [];

        // 加载重庆行政区域边界
        const districtSearch = new AMap.DistrictSearch({
          level: "city", // 行政级别
          subdistrict: 0, // 不返回下级行政区
          extensions: "all", // 返回行政区边界坐标点
          showbiz: false, // 不返回商圈
        });

        // 搜索重庆市行政区域
        districtSearch.search("重庆市", (status, result) => {
          if (
            status === "complete" &&
            result.districtList &&
            result.districtList.length > 0
          ) {
            const boundaries = result.districtList[0].boundaries;

            if (boundaries) {
              // 绘制重庆边界
              const polygons = [];

              for (let i = 0; i < boundaries.length; i++) {
                // 创建重庆市区域多边形，降低填充透明度以显示内部路网
                const polygon = new AMap.Polygon({
                  path: boundaries[i],
                  strokeColor: "#3ec6ff", // 边界线颜色
                  strokeWeight: 2, // 边界线宽度
                  strokeOpacity: 1, // 边界线透明度
                  fillColor: "#012F66", // 填充颜色为深蓝色
                  fillOpacity: 0.4, // 降低填充透明度，让内部路网可见
                  zIndex: 10,
                });
                polygons.push(polygon);
              }

              // 添加多边形到地图
              map.add(polygons);

              const outerMask = new AMap.Polygon({
                path: [
                  [72, 54], // 中国左上角
                  [72, 4], // 中国左下角
                  [138, 4], // 中国右下角
                  [138, 54], // 中国右上角
                ],
                strokeColor: "transparent",
                strokeWeight: 0,
                fillColor: "#071a36",
                fillOpacity: 0.6, // 半透明遮罩
                zIndex: 9, // 置于重庆边界下方
                bubble: true, // 禁止冒泡，使得地图交互穿过这个图层
              });

              // 添加外部遮罩到地图
              map.add(outerMask);

              // 从API获取隧道数据并渲染标记
              getTunnelList()
                .then((response) => {
                  console.log("隧道列表:", response);
                  let tunnelDataFromApi = [];

                  if (
                    response &&
                    response.code === 200 &&
                    Array.isArray(response.data)
                  ) {
                    // 确保所有数据都被处理，即使坐标有问题
                    tunnelDataFromApi = response.data
                      .filter((item) => {
                        // 过滤掉明显无效的数据
                        const lng = Number(item.lng);
                        const lat = Number(item.lat);
                        if (
                          isNaN(lng) ||
                          isNaN(lat) ||
                          !isFinite(lng) ||
                          !isFinite(lat)
                        ) {
                          console.error(
                            `过滤掉无效坐标的隧道: ${
                              item.mapName || "未命名"
                            } [${item.lng}, ${item.lat}]`
                          );
                          return false;
                        }
                        return true;
                      })
                      .map((item) => {
                        // 转换API返回的数据格式为我们需要的格式

                        // 确保经纬度正确处理
                        let lng = Number(item.lng);
                        let lat = Number(item.lat);

                        // 检查坐标是否有效，或者可能需要互换经纬度
                        if (
                          (lng < -180 || lng > 180 || lat < -90 || lat > 90) &&
                          lat >= -180 &&
                          lat <= 180 &&
                          lng >= -90 &&
                          lng <= 90
                        ) {
                          // 可能经纬度顺序颠倒了，互换
                          console.warn(
                            `${item.mapName} 的坐标可能颠倒，进行互换:`,
                            [lng, lat],
                            "=>",
                            [lat, lng]
                          );
                          [lng, lat] = [lat, lng];
                        }

                        return {
                          id: item.mapId,
                          name: item.mapName,
                          // 使用处理后的经纬度
                          position: [lng, lat],
                          tunnelType: item.tunnelType || "隧道", // 默认为普通隧道类型
                          // 如果API没有返回这些字段，我们提供默认值
                          cameras: item.cameras || 0,
                          events: item.events || 0,
                        };
                      });
                    // 调试输出处理后的数据
                    // console.log("处理后的隧道数据:", tunnelDataFromApi);
                  }

                  if (tunnelDataFromApi && tunnelDataFromApi.length > 0) {
                    addTunnelMarkers(tunnelDataFromApi);
                  } else {
                    console.warn("未获取到隧道数据或数据为空，使用默认数据");
                    addTunnelMarkers(tunnelsData); // 使用备用数据
                  }
                })
                .catch((error) => {
                  console.error("获取隧道数据失败:", error);
                  addTunnelMarkers(tunnelsData); // 使用备用数据
                });
            } else {
              console.error("获取重庆市行政区域失败");
              // 即使获取失败也尝试添加隧道标记
              getTunnelList()
                .then((response) => {
                  let tunnelDataFromApi = [];

                  // 根据返回格式处理数据
                  if (
                    response &&
                    response.code === 200 &&
                    Array.isArray(response.data)
                  ) {
                    tunnelDataFromApi = response.data.map((item) => {
                      return {
                        id: item.mapId,
                        name: item.mapName,
                        // 确保经纬度为数值类型
                        position: [Number(item.lng), Number(item.lat)],
                        tunnelType: item.tunnelType,
                        cameras: item.cameras || 0,
                        events: item.events || 0,
                      };
                    });
                    // console.log("处理后的隧道数据:", tunnelDataFromApi);
                  }

                  if (tunnelDataFromApi && tunnelDataFromApi.length > 0) {
                    addTunnelMarkers(tunnelDataFromApi);
                  } else {
                    addTunnelMarkers(tunnelsData); // 使用备用数据
                  }
                })
                .catch(() => {
                  addTunnelMarkers(tunnelsData); // 使用备用数据
                });
            }
          } else {
            console.error("获取重庆市行政区域失败");
            // 即使获取失败也尝试添加隧道标记
            getTunnelList()
              .then((response) => {
                let tunnelDataFromApi = [];

                // 根据apifox截图的返回格式处理数据
                if (
                  response &&
                  response.code === 200 &&
                  Array.isArray(response.data)
                ) {
                  tunnelDataFromApi = response.data.map((item) => {
                    return {
                      id: item.mapId,
                      name: item.mapName,
                      // 确保经纬度为数值类型
                      position: [Number(item.lng), Number(item.lat)],
                      tunnelType: item.tunnelType,
                      cameras: item.cameras || 0,
                      events: item.events || 0,
                    };
                  });
                  // console.log("处理后的隧道数据:", tunnelDataFromApi);
                }

                if (tunnelDataFromApi && tunnelDataFromApi.length > 0) {
                  addTunnelMarkers(tunnelDataFromApi);
                } else {
                  addTunnelMarkers(tunnelsData); // 使用备用数据
                }
              })
              .catch(() => {
                addTunnelMarkers(tunnelsData); // 使用备用数据
              });
          }
        });
      } catch (error) {
        console.error("地图初始化出错:", error);
      }
    })
    .catch((e) => {
      console.error("AMap加载失败:", e);
    });
}

// 不再需要摄像机和事件标记组

getTunnelSummary().then((res) => {
  console.log("隧道概况", res);
});
// 图表引用
const chartRef = ref(null);
let chartInstance = null;

// 隧道数据（默认值，将被API数据替换）
const tunnelData = ref([
  { value: 0, name: "特长隧道", color: "#4FC3F7" },
  { value: 0, name: "隧道群", color: "#FFD54F" },
]);
const totalTunnels = ref(0);

// 备用隧道位置数据（仅在API调用失败时使用）
const tunnelsData = [
  { id: 1, name: "石门隧道", position: [106.45, 29.57], cameras: 5, events: 0 },
  { id: 2, name: "朝阳隧道", position: [106.31, 29.52], cameras: 3, events: 1 },
  { id: 3, name: "双福隧道", position: [106.28, 29.4], cameras: 6, events: 0 },
  { id: 4, name: "铜锣隧道", position: [106.15, 29.2], cameras: 4, events: 1 },
  {
    id: 5,
    name: "永川隧道",
    position: [105.927, 29.356],
    cameras: 7,
    events: 2,
  },
];

// 添加隧道标记
function addTunnelMarkers(data) {
  if (!map) {
    console.error("地图实例未初始化，无法添加隧道标记");
    return;
  }

  // 确保所有有效数据都被渲染
  if (!data || !data.length) {
    console.warn("没有可渲染的隧道数据");
    return;
  }

  // 检查tunnelGroupIcon和singleTunnelIcon是否正确加载
  console.log("tunnelGroupIcon路径:", tunnelGroupIcon);
  console.log("singleTunnelIcon路径:", singleTunnelIcon);

  data.forEach((tunnel, index) => {
    // 构建位置数组 [经度, 纬度]
    let position = tunnel.position;

    // 确保position是数组格式，且包含有效的经纬度数值
    if (!position || !Array.isArray(position)) {
      if (tunnel.longitude !== undefined && tunnel.latitude !== undefined) {
        position = [Number(tunnel.longitude), Number(tunnel.latitude)];
      } else {
        console.error(`隧道 ${index} 缺少有效位置数据:`, tunnel);
        return; // 跳过无效数据
      }
    }

    // 确保经纬度为数字
    if (typeof position[0] !== "number" || typeof position[1] !== "number") {
      position = [Number(position[0]), Number(position[1])];
    }

    // 检查位置值是否有效
    if (
      isNaN(position[0]) ||
      isNaN(position[1]) ||
      !isFinite(position[0]) ||
      !isFinite(position[1])
    ) {
      console.error(`隧道 ${tunnel.name || "未命名"} 位置无效:`, position);
      return;
    }

    const tunnelName = tunnel.name || tunnel.tunnelName || "未命名隧道";
    // console.log(`正在添加隧道 ${tunnelName} 标记，位置:`, position, "类型:", tunnel.tunnelType);

    try {
      // 根据隧道类型选择不同的图片
      let iconImage;
      if (tunnel.tunnelType === "隧道群") {
        // 隧道群图标
        iconImage = tunnelGroupIcon;
      } else {
        // 普通隧道图标
        iconImage = singleTunnelIcon;
      }

      // 创建标记，使用图片中下方作为锚点
      const marker = new AMap.Marker({
        map: map,
        position: position,
        anchor: "bottom-center", // 设置锚点为底部中心，确保图标始终在正确的经纬度位置
        zIndex: 100, // 提高标记的层级
        title: tunnelName, // 鼠标悬停时显示的标题
        icon: new AMap.Icon({
          size: new AMap.Size(130, 108), // 图片大小
          image: iconImage,
          imageSize: new AMap.Size(130, 108), // 图片大小
          imageOffset: new AMap.Pixel(0, 0), // 图片相对于可视区域的偏移量
        }),
        cursor: "pointer", // 添加手型光标，提示用户可点击
      });

      // 添加点击事件处理器
      marker.on("click", () => {
        zoomToTunnel(position, tunnelName);
      });

      // 添加鼠标悬停效果
      marker.on("mouseover", () => {
        // 检查setAnimation方法是否存在
        if (marker.setAnimation && typeof marker.setAnimation === 'function') {
          marker.setAnimation("scale"); // 设置缩放动画
        }
        marker.setZIndex(110); // 提高悬停时的层级
      });

      marker.on("mouseout", () => {
        // 检查setAnimation方法是否存在
        if (marker.setAnimation && typeof marker.setAnimation === 'function') {
          marker.setAnimation(null); // 移除动画
        }
        marker.setZIndex(100); // 恢复原来的层级
      });

      // 将标记添加到全局数组
      window.tunnelMarkers.push(marker);

      // 计算文本位置相对于标记位置的偏移
      // 红框区域位于图标的右侧，根据截图调整到准确位置
      const textOffsetX = -10; // 向右偏移到红框区域
      const textOffsetY = -94; // 调整到红框区域中心位置

      // 添加文本标签
      const textMarker = new AMap.Text({
        map: map,
        position: position,
        text: tunnelName,
        offset: new AMap.Pixel(textOffsetX, textOffsetY), // 调整文字位置到右侧红框区域
        style: {
          color: "#fff",
          fontSize: "10px",
          fontWeight: "bold",
          backgroundColor: "transparent", // 透明背景
          border: "none",
          padding: "2px 4px",
          textAlign: "center", // 居中对齐
          width: "60px", // 调整宽度适应红框
          overflow: "hidden",
          textOverflow: "ellipsis",
          cursor: "pointer", // 添加手型光标
        },
        zIndex: 101, // 文字层级高于图标
      });

      // 为文本标签也添加点击事件
      textMarker.on("click", () => {
        zoomToTunnel(position, tunnelName);
      });

      // 为文本添加鼠标悬停效果
      textMarker.on("mouseover", () => {
        // 检查setAnimation方法是否存在
        if (marker.setAnimation && typeof marker.setAnimation === 'function') {
          marker.setAnimation("scale"); // 设置图标缩放动画
        }
        textMarker.setStyle({
          color: "#3ec6ff", // 悬停时改变文字颜色
          fontSize: "11px", // 悬停时略微放大字体
        });
      });

      textMarker.on("mouseout", () => {
        // 检查setAnimation方法是否存在
        if (marker.setAnimation && typeof marker.setAnimation === 'function') {
          marker.setAnimation(null); // 移除动画
        }
        textMarker.setStyle({
          color: "#fff", // 恢复原来的文字颜色
          fontSize: "10px", // 恢复原来的字体大小
        });
      });

      // 将文本标记添加到全局数组
      window.tunnelTexts.push(textMarker);

      // console.log(`隧道 ${tunnelName} 标记添加成功`);
    } catch (error) {
      console.error(`添加隧道 ${tunnel.name || "未命名"} 标记失败:`, error);
    }

    // 不添加摄像机和事件标记，只显示隧道点位
  });
}

// 已移除摄像机和事件标记的显示/隐藏控制功能

// 初始化图表
function initChart() {
  if (!chartRef.value) return;

  // 获取隧道概况数据
  getTunnelSummary()
    .then((response) => {
      if (response && response.code === 200 && response.data) {
        totalTunnels.value = response.data.total || 0;

        // 处理隧道类型数据
        if (
          Array.isArray(response.data.list) &&
          response.data.list.length > 0
        ) {
          // 获取API返回的所有隧道类型数据
          let newTunnelData = [];

          // 处理每种隧道类型
          response.data.list.forEach((item) => {
            if (item.name && item.value !== undefined) {
              // 只接受特长隧道和隧道群两种类型
              if (item.name === "特长隧道" || item.name === "隧道群") {
                // 使用API返回的颜色，或者使用默认颜色
                const tunnelColor =
                  item.color ||
                  (item.name === "特长隧道" ? "#4FC3F7" : "#FFD94F");

                newTunnelData.push({
                  value: item.value,
                  name: item.name,
                  color: tunnelColor,
                });
              }
            }
          });

          // 如果没有找到特长隧道或隧道群，手动创建它们
          if (!newTunnelData.find((item) => item.name === "特长隧道")) {
            newTunnelData.push({
              value: 38, // 默认值
              name: "特长隧道",
              color: "#4FC3F7",
            });
          }

          if (!newTunnelData.find((item) => item.name === "隧道群")) {
            newTunnelData.push({
              value: 150, // 默认值
              name: "隧道群",
              color: "#FFD94F",
            });
          }

          // 确保只有两种类型
          newTunnelData = newTunnelData.filter(
            (item) => item.name === "特长隧道" || item.name === "隧道群"
          );

          // 更新隧道数据
          if (newTunnelData.length > 0) {
            tunnelData.value = newTunnelData;
          }
        }
      }

      // 渲染图表
      renderChart();
    })
    .catch((error) => {
      console.error("获取隧道概况失败:", error);
      // 出错时使用默认值渲染
      renderChart();
    });
}

// 渲染图表方法
function renderChart() {
  if (!chartRef.value) return;

  chartInstance = echarts.init(chartRef.value);

  // 准备图表数据
  const chartData = tunnelData.value.map((item, index) => ({
    value: item.value,
    name: item.name,
    itemStyle: { color: item.color },
    label: {
      position: index === 0 ? "left" : "right", // 第一个数据(特长隧道)放左侧，第二个数据(隧道群)放右侧
      align: "center",
      formatter: () => {
        // 标签格式：数值座\n名称，确保不显示0
        return `{num|${item.value}}{unit|座}\n{type|${item.name}}`;
      },
      rich: {
        num: {
          fontSize: 17,
          fontWeight: "bold",
          color: "#fff",
          padding: [0, 2, 0, 0], // 右侧2px间距
          lineHeight: 22,
        },
        unit: {
          fontSize: 14,
          color: "#fff",
          padding: [0, 0, 0, 0],
          lineHeight: 22,
        },
        type: {
          fontSize: 16,
          color: "#fff",
          lineHeight: 20,
          fontWeight: "normal",
          padding: [2, 0, 0, 0], // 上方2px间距
        },
      },
    },
    labelLine: {
      length: 30, // 第一段线长度
      length2: 50, // 第二段线长度
      smooth: false,
      lineStyle: {
        width: 1.5,
        type: "solid",
      },
    },
  }));

  // 设置图表配置
  chartInstance.setOption({
    backgroundColor: "rgba(0,0,0,0)",
    tooltip: { show: false },
    legend: { show: false },
    series: [
      {
        type: "pie",
        radius: ["45%", "65%"], // 调整环形比例更接近设计图
        center: ["50%", "50%"], // 居中显示
        avoidLabelOverlap: false,
        clockwise: true, // 顺时针排布
        startAngle: 90, // 从顶部开始
        itemStyle: {
          borderWidth: 0, // 移除边框
          borderColor: "transparent",
        },
        label: {
          show: true,
          position: "outside",
          formatter: null, // 将使用每个数据项自己的formatter
          distanceToLabelLine: 10, // 增加标签与线的距离
          padding: [0, 0, 0, 0], // 移除内边距
        },
        labelLine: {
          show: true,
          length: 25, // 第一段线长度
          length2: 80, // 第二段线长度，更长以适应设计图
          minTurnAngle: 90,
          smooth: false,
          lineStyle: {
            color: "#FFFFFF",
            width: 1,
            opacity: 0.8,
            type: "solid",
          },
        },
        minShowLabelAngle: 0,
        zlevel: 10, // 提高层级，确保显示在最上层
        emphasis: {
          scale: false, // 禁用鼠标悬停时的放大效果
        },
        data: chartData,
      },
    ],
    graphic: [
      {
        type: "text",
        left: "center",
        top: "56%",
        style: {
          text: "总隧道",
          textAlign: "center",
          fill: "#fff",
          fontSize: 16,
          fontWeight: "normal",
          lineHeight: 16,
        },
        zlevel: 11,
      },
      {
        type: "text",
        left: "center",
        top: "40%",
        style: {
          text: `${totalTunnels.value}座`,
          textAlign: "center",
          fill: "#fff",
          fontSize: 24, // 增大字号，更接近设计图
          fontWeight: "bold",
          lineHeight: 24,
        },
        zlevel: 11,
      },
    ],
  });
}

// 监听窗口大小变化
function handleResize() {
  chartInstance && chartInstance.resize();
}

// 刷新隧道概况数据
function refreshTunnelSummary() {
  getTunnelSummary()
    .then((response) => {
      if (response && response.code === 200 && response.data) {
        // 更新总数
        totalTunnels.value = response.data.total || 0;

        // 处理隧道类型数据
        if (
          Array.isArray(response.data.list) &&
          response.data.list.length > 0
        ) {
          const newTunnelData = [];

          response.data.list.forEach((item) => {
            if (item.name && item.value !== undefined) {
              const tunnelColor =
                item.color ||
                (item.name === "特长隧道"
                  ? "#4FC3F7"
                  : item.name === "隧道群"
                  ? "#FFD94F"
                  : "#" + Math.floor(Math.random() * 16777215).toString(16));

              newTunnelData.push({
                value: item.value,
                name: item.name,
                color: tunnelColor,
              });
            }
          });

          if (newTunnelData.length > 0) {
            tunnelData.value = newTunnelData;

            // 更新图表
            if (chartInstance) {
              const chartData = tunnelData.value.map((item, index) => ({
                value: item.value,
                name: item.name,
                itemStyle: { color: item.color },
                label: {
                  position: index === 0 ? "left" : "right", // 第一个数据(特长隧道)放左侧，第二个数据(隧道群)放右侧
                  alignTo: "edge",
                  margin: 20,
                  formatter: () => {
                    // 标签格式：数值座\n名称
                    return `{value|${item.value}座}\n{name|${item.name}}`;
                  },
                  rich: {
                    value: {
                      color: "#fff",
                      fontSize: 16,
                      fontWeight: "bold",
                      align: "center",
                      lineHeight: 20,
                    },
                    name: {
                      color: "#FFFFFF",
                      fontSize: 14,
                      align: "center",
                      padding: [0, 0, 0, 0],
                      lineHeight: 20,
                    },
                  },
                },
                labelLine: {
                  length: 30,
                  length2: 50,
                  smooth: false,
                  lineStyle: {
                    width: 1.5,
                    type: "solid",
                  },
                },
              }));

              chartInstance.setOption({
                series: [{ data: chartData }],
                graphic: [
                  {
                    type: "text",
                    left: "center",
                    top: "53%",
                    style: { text: "总隧道" },
                  },
                  {
                    type: "text",
                    left: "center",
                    top: "38%",
                    style: {
                      text: `${totalTunnels.value}座`,
                      textAlign: "center",
                      fill: "#fff",
                      fontSize: 20,
                      fontWeight: "bold",
                      lineHeight: 20,
                    },
                  },
                ],
              });
            }
          }
        }
      }
    })
    .catch((error) => {
      console.error("刷新隧道概况失败:", error);
    });
}

// 添加区域裁剪的方法，用于在方案一不理想时尝试
function addDistrictClip() {
  if (!map) return;

  // 创建行政区图层
  const districtLayer = new AMap.DistrictLayer.Province({
    zIndex: 12,
    adcode: [500000], // 重庆市的行政区划编码
    depth: 1,
    styles: {
      fill: function (properties) {
        return {
          color: "transparent", // 填充透明
          cursor: "pointer",
        };
      },
      "province-stroke": function (properties) {
        return {
          color: "#3ec6ff", // 边界线颜色
          width: 2,
        };
      },
    },
  });

  // 将行政区图层添加到地图上
  districtLayer.setMap(map);

  // 创建一个遮罩层，覆盖重庆市以外的区域
  const maskLayer = new AMap.DistrictLayer.Province({
    zIndex: 11,
    adcode: [500000], // 重庆市的行政区划编码
    depth: 1,
    styles: {
      fill: function (properties) {
        // 使用反向填充，只填充省外区域
        return {
          color: "#071a36",
          opacity: 0.6,
        };
      },
      "province-stroke": function (properties) {
        return {
          color: "transparent",
          width: 0,
        };
      },
    },
  });

  maskLayer.setMap(map);
}

// 自适应调整标记大小
function updateMarkersScale() {
  if (!map) return;

  const currentZoom = map.getZoom();
  const scaleFactor = 1 + (currentZoom - 8) * 0.1;

  // console.log(`当前缩放级别: ${currentZoom}, 比例因子: ${scaleFactor}`);
  console.log(
    `标记数量: ${window.tunnelMarkers.length}, 文本数量: ${window.tunnelTexts.length}`
  );

  // 更新图标大小
  if (window.tunnelMarkers && window.tunnelMarkers.length > 0) {
    window.tunnelMarkers.forEach((marker) => {
      if (marker && marker.getIcon) {
        const iconImage = marker.getIcon().getImage();
        marker.setIcon(
          new AMap.Icon({
            size: new AMap.Size(130 * scaleFactor, 108 * scaleFactor),
            image: iconImage,
            imageSize: new AMap.Size(130 * scaleFactor, 108 * scaleFactor),
            imageOffset: new AMap.Pixel(0, 0),
          })
        );
      }
    });
  }

  // 更新文本大小
  if (window.tunnelTexts && window.tunnelTexts.length > 0) {
    window.tunnelTexts.forEach((text) => {
      if (text && text.setStyle) {
        text.setStyle({
          fontSize: Math.max(8, Math.round(10 * scaleFactor)) + "px",
          lineHeight: Math.round(18 * scaleFactor) + "px",
          padding: "2px " + Math.round(4 * scaleFactor) + "px",
          width: Math.round(75 * scaleFactor) + "px",
          overflow: "hidden",
          textOverflow: "ellipsis",
        });

        // 同步更新文本的偏移位置，保持文本与图标的相对位置
        const textOffsetX = Math.round(-10 * scaleFactor);
        const textOffsetY = Math.round(-94 * scaleFactor);
        text.setOffset(new AMap.Pixel(textOffsetX, textOffsetY));
      }
    });
  }
}

// 点击隧道标记放大到该位置
function zoomToTunnel(position, tunnelName) {
  if (!map) return;

  console.log(`点击隧道: ${tunnelName}, 位置: ${position}`);

  // 设置动画过渡效果
  map.setStatus({ animateEnable: true });

  // 放大到15级并居中到隧道位置
  map.setZoomAndCenter(15, position, false, 1000); // 使用1000毫秒的过渡动画
  
  // 触发三维地图飞行到对应隧道
  if (supermapRef.value) {
    // 跳转到设备概况页面
    router.push({
      path: '/',
      query: { navIndex: 2 }
    });
    
    // 延迟执行，等待页面切换和三维地图准备好
    setTimeout(() => {
      if (supermapRef.value && typeof supermapRef.value.loadTunnelMarkers === 'function') {
        // 确保三维隧道标记已加载
        supermapRef.value.loadTunnelMarkers().then(() => {
          // 尝试在三维地图中找到并飞行到该隧道
          if (supermapRef.value.modelControl && 
              supermapRef.value.modelControl.value && 
              supermapRef.value.modelControl.value.flyToTunnel) {
              
            // 构造隧道对象，供三维地图flyToTunnel使用
            const tunnelObj = {
              name: tunnelName,
              position: [position[0], position[1], 300]
            };
            
            supermapRef.value.modelControl.value.flyToTunnel(tunnelObj);
          }
        });
      }
    }, 1500);
  }
}

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);

  // 清除图表实例
  chartInstance && chartInstance.dispose();

  // 清除地图实例和相关数据
  if (map) {
    map.destroy();
    map = null;
  }

  // 移除window上的initMap引用
  if (window.initMap === initMap) {
    window.initMap = null;
  }
});
</script>

<style lang="scss" scoped>
.tunnel-view {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#map-container {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.title-container {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #3ec6ff;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.info-panel {
  position: absolute;
  top: 80px;
  right: 20px;
  width: 452px;
  background: rgba(10, 30, 60, 0.85);
  border-radius: 8px;
  overflow: hidden;
  z-index: 10;

  .panel-header {
    background: url("@/assets/image/TunnelOverviewPanel/组 2.png") no-repeat
      center/cover;
    width: 452px;
    height: 43px;
    padding: 3px 0 25px 30px; /* 修改左边距，让标题靠左 */
    font-size: 18px;
    font-weight: bold;
    color: #fff; /* 修改颜色为设计图中的颜色 */
    text-align: left; /* 确保文本左对齐 */
  }

  .panel-content {
    width: 100%;
    height: 210px;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("@/assets/image/TunnelOverviewPanel/1111111111111.png")
      no-repeat center/cover;
  }

  .chart-container {
    width: 100%;
    height: 180px; /* 增加高度以适应设计图 */
    margin: 0 auto;
  }
}
</style>
